import 'package:flutter/material.dart';
import 'package:flutter_project/common/utils/screen_size_utils.dart';
import 'package:flutter_project/config/app_bar_view.dart';
import 'package:flutter_project/config/theme_color.dart';

class AskSurveyPage extends StatefulWidget {
  const AskSurveyPage({super.key});

  @override
  State<AskSurveyPage> createState() => _AskSurveyPageState();
}

class _AskSurveyPageState extends State<AskSurveyPage> {
  String firstSelect = '一';
  String secondSelect = '二';
  String thirdSelect = '三';
  String fourSelect = '四';
  String fiveSelect = '五';
  String sixSelect = '六';
  ValueNotifier<double> merWidth = ValueNotifier(0.0);
  List choseList = [];
  double perWidth = 0.0;

  @override
  Widget build(BuildContext context) {
    perWidth = (ScreenSizeUtils.deviceScreenWidth(context)) / 6;
    merWidth.value = perWidth * choseList.length;
    return CommonAppWidget.navAppBar(
      title: '问卷调查',
      bgColor: Colors.white,
      childWidget: Stack(
        children: [
          ValueListenableBuilder(
              valueListenable: merWidth,
              builder: (BuildContext context, double value, Widget? child) {
                return Container(
                  height: 1.5,
                  width: value,
                  color: ThemeColor.mainColor,
                );
              }),
          ListView(
            padding: const EdgeInsets.symmetric(horizontal: 10),
            children: [
              const SizedBox(
                height: 20,
              ),
              Center(
                child: Text(
                  '爱诗剧场使用度满意度调查',
                  style: TextStyle(
                      color: ThemeColor.mainColor,
                      fontSize: 18,
                      fontWeight: FontWeight.w500),
                ),
              ),
              const SizedBox(
                height: 20,
              ),
              const Text(
                '这是一个关于爱诗科技剧场使用满意度的调查问卷，根据您的实际使用情况填写问卷，感谢您的宝贵反馈。',
                style: TextStyle(color: Colors.black, fontSize: 16),
              ),
              const SizedBox(
                height: 40,
              ),
              Row(
                children: getLineWidget(),
              ),
              const SizedBox(
                height: 40,
              ),
              getAskItemView(
                  title: '您是否是河马剧场的活跃用户?',
                  nameList: ['是', '否'],
                  choseGroupValue: firstSelect,
                  id: 1),
              getAskItemView(
                  title: '您认为河马剧场的用户界面是否易于使用?',
                  nameList: [
                    '非常易于使用',
                    '比较易于使用',
                    '一般',
                    '不太易于使用',
                    '非常不易于使用',
                  ],
                  choseGroupValue: secondSelect,
                  id: 2),
              getAskItemView(
                  title: '您在观看过程中是否遇到了视频卡顿或加载问题?',
                  nameList: [
                    '从未遇到',
                    '很少遇到',
                    '有时遇到',
                    '经常遇到',
                    '总是遇到',
                  ],
                  choseGroupValue: thirdSelect,
                  id: 3),
              getAskItemView(
                  title: '您对河马剧场对短剧题材丰富度感到满意吗?',
                  nameList: [
                    '非常满意',
                    '满意',
                    '一般',
                    '不太满意',
                    '非常不满意',
                  ],
                  choseGroupValue: fourSelect,
                  id: 4),
              getAskItemView(
                  title: '您更喜欢使用哪种方式解锁短剧内容?',
                  nameList: [
                    '观看广告',
                    '付费',
                  ],
                  choseGroupValue: fiveSelect,
                  id: 5),
              getAskItemView(
                title: '如果您是会员，您对会员服务和特权感到满意吗?',
                nameList: [
                  '非常满意',
                  '满意',
                  '一般',
                  '不太满意',
                  '非常不满意',
                ],
                choseGroupValue: sixSelect,
                id: 6,
              ),
              const Text(
                '您有哪些关于爱诗科技改进的建议或意见？',
                style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
              ),
              const SizedBox(
                height: 5,
              ),
              TextField(
                decoration: InputDecoration(
                  contentPadding:
                      const EdgeInsets.symmetric(vertical: 10, horizontal: 5),
                  isCollapsed: true,
                  border: const OutlineInputBorder(
                    borderSide: BorderSide(color: Colors.red),
                  ),
                  enabledBorder: OutlineInputBorder(
                    borderSide: BorderSide(color: ThemeColor.lineColor),
                  ),
                ),
              ),
              const SizedBox(
                height: 15,
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget getLineItem() {
    return Row(
      children: [
        Container(
          width: 5,
          height: 1.0,
          color: Colors.grey,
        ),
        const SizedBox(
          width: 2,
        )
      ],
    );
  }

  getLineWidget() {
    List<Widget> l = [];
    for (int i = 0; i < 48; i++) {
      l.add(getLineItem());
    }
    return l;
  }

  Widget getAskItemView(
      {String title = '',
      required List nameList,
      String choseGroupValue = '',
      int id = 1}) {
    return Container(
      margin: const EdgeInsets.only(bottom: 30),
      decoration: BoxDecoration(border: Border(bottom: getLineView())),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          RichText(
            text: TextSpan(
                text: '* ',
                style: const TextStyle(color: Colors.red, fontSize: 12),
                children: [
                  TextSpan(
                    text: title,
                    style: const TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w500,
                      color: Colors.black,
                    ),
                  )
                ]),
          ),
          const SizedBox(
            height: 15,
          ),
          getColumnWidget(nameList, choseGroupValue: choseGroupValue, id: id)
        ],
      ),
    );
  }

  getColumnWidget(List nameList, {String choseGroupValue = '', int id = 1}) {
    List<Widget> l = [];
    for (String element in nameList) {
      l.add(getAskItemLineView(
          name: element, choseGroupValue: choseGroupValue, id: id));
    }

    return Column(
      children: l,
    );
  }

  BorderSide getLineView() {
    return BorderSide(
      color: ThemeColor.lineColor,
      width: 1.0,
    );
  }

  Widget getAskItemLineView(
      {String name = '', String choseGroupValue = '', int id = 1}) {
    return Container(
      height: 50,
      decoration: BoxDecoration(
        border: Border(
          top: getLineView(),
          left: getLineView(),
          right: getLineView(),
        ),
      ),
      child: Row(
        children: [
          Theme(
            data: ThemeData(unselectedWidgetColor: Colors.red),
            child: Radio(
              value: name,
              groupValue: choseGroupValue,
              onChanged: (res) {
                String choseStr = res as String;
                setState(() {
                  if (id == 1) {
                    firstSelect = choseStr;
                  } else if (id == 2) {
                    secondSelect = choseStr;
                  } else if (id == 3) {
                    thirdSelect = choseStr;
                  } else if (id == 4) {
                    fourSelect = choseStr;
                  } else if (id == 5) {
                    fiveSelect = choseStr;
                  } else if (id == 6) {
                    sixSelect = choseStr;
                  }
                  if (!choseList.contains(id)) {
                    choseList.add(id);
                    merWidth.value = perWidth * choseList.length;
                  }
                });
              },
              fillColor: MaterialStateColor.resolveWith(
                (states) {
                  if (states.contains(MaterialState.selected)) {
                    return ThemeColor.mainColor;
                  }
                  return ThemeColor.lineColor;
                },
              ),
            ),
          ),
          Text(
            name,
            style: const TextStyle(fontSize: 16),
          ),
        ],
      ),
    );
  }
}
